import { CBlockCustom, FFormCustom } from '@vh-mobile/pro-components';
import type { ColumnsType } from '@vh-mobile/pro-components/lib/f-form-custom/types';
import MainContainerCustom from '@/components/MainContainerCustom';
import { Button } from '@antmjs/vantui';
import { View } from '@tarojs/components';
import { publicUploadFile } from '@/services/public/public';

const columns: ColumnsType[] = [
  {
    title: '标题1',
    dataIndex: 'title1',
    valueType: 'FInputCustom',
    fieldProps: {
      maxlength: 10,
    },
    cellProps: {
      rules: [{ required: true }, { type: 'isNumeric' }],
    },
  },
  {
    title: '类型1',
    dataIndex: 'select1',
    valueType: 'FSelectCustom',
    cellProps: {},
    fieldProps: {
      multiple: true,
      search: true,
      options: [
        {
          value: 1,
          label: 'Select1',
        },
        {
          value: 2,
          label: 'Select2',
        },
        {
          value: 3,
          label: 'Select3',
        },
        {
          value: 4,
          label: 'Select4',
        },
        {
          value: 5,
          label: 'Select5',
        },
        {
          value: 6,
          label: 'Select6',
        },
        {
          value: 7,
          label: 'Select7',
        },
        {
          value: 8,
          label: 'Select8',
        },
      ],
    },
  },
  {
    title: '可以联动',
    dataIndex: 'select2',
    valueType: 'FSelectCustom',
    fieldProps: {
      options: [
        {
          value: 1,
          label: '可以联动1',
        },
        {
          value: 2,
          label: '可以联动2',
        },
      ],
    },
  },
  {
    title: '动态dependency',
    valueType: 'Dependency',
    dataIndex: 'Dependency1',
    name: ['select2'],
    column: (formData: any, newFormRef: any) => {
      console.log(newFormRef);
      if (formData.select2 === 2) {
        return {
          title: '联动类型3',
          dataIndex: 'select3',
          valueType: 'FSelectCustom',
          fieldProps: {
            options: [
              {
                value: 1,
                label: 'Select1',
              },
              {
                value: 2,
                label: 'Select2',
              },
            ],
          },
        };
      }
      return null;
    },
  },
  {
    title: '选择',
    dataIndex: 'FCheckboxDatepickerCustom',
    valueType: 'FCheckboxDatepickerCustom',
    fieldProps: {
      field: ['this-day', 'this-month', 'this-year', 'this-sum', 'day', 'month', 'year'],
    },
    cellProps: {
      position: 'bottom',
    },
  },
  {
    title: '排名依据',
    dataIndex: 'checkbox1',
    valueType: 'FCheckboxCustom',
    fieldProps: {
      options: [
        { value: 1, label: '选项一' },
        { value: 2, label: '选项选项一' },
        { value: 3, label: '选项三' },
        { value: 4, label: '选项四' },
        { value: 5, label: '选项五选项一' },
        { value: 6, label: '选项六' },
        { value: 7, label: '选项七' },
      ],
      multiple: true,
      checkboxAll: true,
    },
    cellProps: {
      position: 'bottom',
    },
  },
  {
    title: '时间1',
    dataIndex: 'datetime1',
    valueType: 'FDatetimePickerCustom',
  },
  {
    title: '时间2',
    dataIndex: 'datetime2',
    valueType: 'FDatetimePickerVantCustom',
    fieldProps: {
      type: 'datetime',
      showFormat: 'YYYY-MM-DD HH:mm',
      valueFormat: 'YYYY-MM-DD HH:mm',
    },
  },
  {
    title: '时间3',
    dataIndex: 'datetime3',
    valueType: 'FDatetimePickerVantCustom',
    fieldProps: {
      type: 'date',
      showFormat: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
  },
  {
    title: '时间4',
    dataIndex: 'datetime4',
    valueType: 'FDatetimePickerVantCustom',
    fieldProps: {
      type: 'year',
      showFormat: 'YYYY',
      valueFormat: 'YYYY',
    },
  },
  {
    title: '级联',
    dataIndex: 'cascade',
    valueType: 'FPickerCustom',
    fieldProps: {
      dataSource: [
        {
          label: '1',
          value: 1,
          children: [
            {
              label: '2',
              value: 2,
              children: [
                {
                  label: '3',
                  value: 3,
                },
                {
                  label: '3c',
                  value: 32,
                },
              ],
            },
            {
              label: '2a',
              value: 21,
              children: [
                {
                  label: '3a',
                  value: 31,
                },
              ],
            },
            {
              label: '2c',
              value: 22,
              children: [],
            },
          ],
        },
        {
          label: '11',
          value: 11,
          children: [
            {
              label: '22',
              value: 22,
              children: [
                {
                  label: '33',
                  value: 33,
                },
              ],
            },
          ],
        },
        {
          label: '111',
          value: 111,
          children: [
            {
              label: '222',
              value: 222,
              children: [
                {
                  label: '333',
                  value: 333,
                },
              ],
            },
          ],
        },
      ],
    },
  },
  {
    title: '联系电话',
    dataIndex: 'cusDefaultPhone',
    valueType: 'FOpenPageCustom',
    fieldProps: {
      rowKey: 'key',
      mode: 'table',
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          fixed: 'left',
          render: (val: any) => <View style={{ color: '#2196F3' }}>{val}</View>,
        },
        {
          title: '年龄',
          dataIndex: 'age',
          align: 'center',
          sort: true,
        },
        {
          title: '账户',
          dataIndex: 'account',
          sort: true,
        },
        {
          title: '住址',
          dataIndex: 'address',
        },
        {
          title: '爱好',
          dataIndex: 'hobby',
        },
      ],
      topRender: () => {
        return <>我是头部</>;
      },
      bottomRender: () => {
        return <>我是底部</>;
      },
      url: '/pages/allEditPage/phoneList/index',
    },
    cellProps: {
      position: 'bottom',
    },
  },
  {
    title: '联系电话12',
    dataIndex: 'cusDefaultPhone12',
    valueType: 'FOpenPageCustom',
    fieldProps: {
      url: '/pages/allEditPage/personnelList/index',
    },
  },
  {
    title: '图片1',
    dataIndex: 'upload1',
    valueType: 'FUploaderCustom',
    fieldProps: {
      maxCount: 5,
      request: publicUploadFile,
    },
    cellProps: {
      hideCellPlaceholder: true,
      position: 'bottom',
    },
  },
  {
    title: '标题textarea',
    dataIndex: 'textarea',
    valueType: 'FInputCustom',
    fieldProps: {
      maxlength: 10,
      type: 'textarea',
    },
    cellProps: {
      position: 'bottom',
      hideCellPlaceholder: true,
    },
  },
];

const columns1: ColumnsType[] = [
  {
    title: '只读模式',
    dataIndex: 'title1',
    valueType: 'FInputCustom',
    fieldProps: {
      readonly: true,
      maxlength: 10,
    },
    cellProps: {
      label: '我是提示信息',
      rules: [{ required: true }],
    },
  },
  {
    title: '间隔分组',
    dataIndex: 'CellGroup',
    valueType: 'CellGroup',
  },
  {
    title: '禁止选择',
    dataIndex: 'select1',
    valueType: 'FSelectCustom',
    cellProps: {
      rules: [{ required: true }],
    },
    fieldProps: {
      disabled: true,
      multiple: true,
      search: true,
      options: [
        {
          value: 1,
          label: 'Select1',
        },
        {
          value: 2,
          label: 'Select2',
        },
      ],
    },
  },
  {
    title: '备注和颜色',
    dataIndex: 'select2',
    valueType: 'FSelectCustom',
    fieldProps: {
      options: [
        {
          value: 1,
          label: 'Select1',
        },
        {
          value: 2,
          label: 'Select2',
        },
      ],
    },
    cellProps: {
      rules: [{ required: true }],
      warn: true,
      label: (data: any, item: any, conifg: any) => {
        console.log('===================');
        console.log(data, item, conifg);
        console.log('===================');
        return <>我是提示信息{data.select2}</>;
      },
      cellTopRender: (data: any) => {
        return <>top信息值：{data.select2}</>;
      },
      cellBottomRender: (data: any) => {
        return <>bottom信息值：{data.select2}</>;
      },
    },
  },
  {
    title: '图片1',
    dataIndex: 'upload1',
    valueType: 'FUploaderCustom',
    fieldProps: {
      readonly: true,
      // disabled: true,
      maxCount: 5,
      request: publicUploadFile,
    },
  },
];

const columns2: ColumnsType[] = [
  {
    title: '数据拆分多个字段',
    dataIndex: '["select1","select2","select3"]',
    valueType: 'FSelectCustom',
    fieldProps: {
      multiple: true,
      search: true,
      multipleLength: 3,
      options: [
        {
          value: 1,
          label: 'Select1',
        },
        {
          value: 2,
          label: 'Select2',
        },
        {
          value: 3,
          label: 'Select3',
        },
        {
          value: 4,
          label: 'Select4',
        },
        {
          value: 5,
          label: 'Select5',
        },
        {
          value: 6,
          label: 'Select6',
        },
        {
          value: 7,
          label: 'Select7',
        },
        {
          value: 8,
          label: 'Select8',
        },
      ],
    },
  },
  {
    title: 'JSON数据',
    dataIndex: 'jsonSelect',
    valueType: 'FSelectCustom',
    apiFormat: {
      type: 'json',
    },
    fieldProps: {
      multiple: true,
      search: true,
      options: [
        {
          value: 1,
          label: 'Select1',
        },
        {
          value: 2,
          label: 'Select2',
        },
        {
          value: 3,
          label: 'Select3',
        },
        {
          value: 4,
          label: 'Select4',
        },
        {
          value: 5,
          label: 'Select5',
        },
        {
          value: 6,
          label: 'Select6',
        },
        {
          value: 7,
          label: 'Select7',
        },
        {
          value: 8,
          label: 'Select8',
        },
      ],
    },
  },
  {
    title: '图片逗号分隔',
    dataIndex: 'upload1',
    valueType: 'FUploaderCustom',
    apiFormat: {
      type: 'split',
      splitType: 'string',
    },
    fieldProps: {
      maxCount: 5,
      request: publicUploadFile,
    },
    cellProps: {
      hideCellPlaceholder: true,
      position: 'bottom',
    },
  },
];

export default function DemoForm() {
  const onSubmit = (values: any) => {
    console.log(values);
  };
  const onValueChange = (values: any) => {
    console.log(values);
  };
  const columnBefor = (column: any, initialValues: any) => {
    console.log(column, initialValues);
    return column;
  };
  const submitValuesBefor = (fromData: any) => {
    return fromData;
  };
  const submitOnDone = (params: any) => {
    console.log(params);
  };
  const submitRequest = async (values: any) => {
    console.log(values);
    return {
      data: {},
      code: 0,
      message: '成功',
    };
  };

  return (
    <MainContainerCustom>
      <CBlockCustom title="表单">
        <FFormCustom
          columns={columns}
          onSubmit={onSubmit}
          initialValues={{
            title1: '111',
            datetime1: '2022-06-16 00:00:00',
            datetime2: '2022-06-20 10:10:00',
            cusDefaultPhone: [
              {
                key: '1',
                name: '胡彦斌',
                age: 37,
                account: 20000,
                address: '西湖区湖底公园1号',
                hobby: '唱歌跳舞唱歌跳舞',
              },
              {
                key: '2',
                name: '吴亦凡',
                age: 32,
                account: 50000,
                address: '朝阳区派出所',
                hobby: '嗨嗨啊嗨嗨嗨啊嗨',
              },
              {
                key: '36',
                name: '王宝强',
                age: 31,
                account: 40000,
                address: '嘟嘟嘟嘟一号',
                width: 200,
                hobby: '休息♨️休息♨️休息♨️休息♨️休息♨️',
              },
            ],
          }}
          onValueChange={onValueChange}
          columnBefor={columnBefor}
          submitRequest={submitRequest}
          submitValuesBefor={submitValuesBefor}
          submitOnDone={submitOnDone}
          submitRender={(formRef: any) => {
            return (
              <View
                key="btns"
                style={{ margin: '16px', display: 'flex', justifyContent: 'space-evenly' }}
              >
                <Button
                  type="primary"
                  key="rest"
                  plain={true}
                  hairline={true}
                  onClick={() => formRef.current?.resetFieldsValue()}
                  style={{ flex: 1 }}
                >
                  重置
                </Button>
                <Button
                  type="primary"
                  formType="submit"
                  key="submit"
                  onClick={() => formRef.current?.submit?.()}
                  style={{ flex: 1, marginLeft: '10px' }}
                >
                  提交
                </Button>
              </View>
            );
          }}
        />
      </CBlockCustom>
      <CBlockCustom title="多种状态">
        <FFormCustom
          columns={columns1}
          initialValues={{
            title1: '111',
            select1: [1],
            select2: 1,
            upload1: [
              'https://img2.woyaogexing.com/2022/08/02/ef0d464a429dce7d!400x400.jpg',
              'https://img2.woyaogexing.com/2022/08/02/ef0d464a429dce7d!400x400.jpg',
            ],
          }}
          // submitFixed={true}
          submitRender={() => {
            return <></>;
          }}
        />
      </CBlockCustom>

      <CBlockCustom title="高级字段配置">
        <FFormCustom
          columns={columns2}
          initialValues={{
            select1: 1,
            select2: 2,
            select3: 3,
            jsonSelect: '[1,2,3]',
            upload1:
              'https://img2.woyaogexing.com/2022/08/02/ef0d464a429dce7d!400x400.jpg,https://img2.woyaogexing.com/2022/08/02/ef0d464a429dce7d!400x400.jpg',
          }}
          onSubmit={(values: any) => {
            console.log('===================');
            console.log(values);
            console.log('===================');
          }}
        />
      </CBlockCustom>
    </MainContainerCustom>
  );
}
